<template>
  <div id="list">
    <div class="list-box">
      <div class="hierarchy">
        <!-- <span>
          <a href>首页</a>
        </span> -->
        <!-- <span>
          <a href>热卖推荐</a>
        </span> -->
      </div>
      <div class="item-list-box">
        <div class="item-list" v-if=" items.length> 0">
        <h2>热门商品</h2>
          <div class="item-box" v-for="value in items" :key="value.id" @click="goto(value.id)">
            <div class="item-img">
              <img :src="value.imgs.split(',')[0]" style="width:70%;height:100%" alt>
            </div>
            <p class="item-name">{{value.productName}}</p>
            <p class="item-desc" >{{value.description}}</p>
            <p class="item-price">
              <span>￥</span>
              <span>{{value.shopPrice}}</span>
            </p>
          </div>
        </div>
        <el-pagination
         v-if="items.length> 0"
          background
          @current-change ="change"
          style="float: right"
          layout="prev, pager, next"
          :total="data.total">
        </el-pagination>
        <div v-if="items.length<= 0" >
          <h2> 抱歉，没有找到与{{$route.query.keyword}}相关的商品 </h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      items: [
      ],
      data:{}
    };
  },
  mounted(){
    this.getList(12,1)
  },
  methods: {
    goto(id) {
      this.$router.push({
        name:"Detail",
        query: {
          id:id
        }
      });
    },
    getList(size,page){
      this.axios.post("/product/search",{
          "page":page,
          "size":size,
          "keyword":this.$route.query.keyword
        }).then((resp)=>{
          if(resp.code==0){
              this.data = resp.data
              this.items = resp.data.records
          }
        })
    },
    change(val){
        this.getList(12,val)
    }
  }
};
</script>

<style scoped>
#list {
  background: #f2f2f2;
  padding-bottom: 80px;
}
.list-box {
  width: 1080px;
  margin: 0 auto;
}
.list-box .hierarchy {
  padding: 30px 0;
  width: 100%;
  display: block;
  float: none;
  background: transparent repeat 0 0 none;
  font-size: 13px;
  padding-bottom: 15px;
}
.hierarchy span a {
  margin: 0 6px;
  cursor: pointer;
  color: #000;
}
.hierarchy span::after {
  content: ">";
}
.hierarchy span:first-child a {
  margin-left: 0;
}
.hierarchy span:last-child a {
  color: #999;
  cursor: default;
}
.hierarchy span:last-child:after {
  content: "";
}
.list-box .item-list-box {
  height: 932px;
  padding-top: 20px;
  margin-bottom: 20px;
}
h2 {
  padding-bottom: 13px;
  font-weight: 400;
  font-size: 24px;
  color: #333;
}
.item-list {
  height: 100%;
}
.item-box {
  position: relative;
  float: left;
  height: 291px;
  width: 24%;
  padding-bottom: 10px;
  margin-left: 5px;
  margin-bottom: 5px;
  text-align: center;
  background: #fff;
}
.item-box:hover {
  margin-top: -2px;
  box-shadow: 0 0 30px #ccc;
  cursor: pointer;
  border: 1px solid #29a3d6;
}
.item-img {
  display: block;
  width: 100%;
  height: 195px;
  text-align: center;
  background: #fff;
  overflow: hidden;
  /* background-color: aquamarine; */
}
.item-img img {
  margin-top: 0px;
  width: 195px;
  height: auto;
}
.item-name {
  height: 26px;
  line-height: 26px;
  margin-top: 10px;
  color: #333;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.item-desc {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-price {
  height: 26px;
  line-height: 26px;
  overflow: hidden;
  color: #a92112;
}
</style>
